<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主控面板 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
    <style>
        :root {
            --content-width: 100% !important; /* 覆盖默认宽度设置 */
        }

        /* 主控面板特定样式 */
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .date-selector {
            display: flex;
            align-items: center;
        }

        .date-selector select {
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            margin-right: 10px;
            font-size: 14px;
        }

        .refresh-btn {
            padding: 8px 15px;
            background-color: var(--primary-light);
            color: white;
            border: none;
            border-radius: 6px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .refresh-btn i {
            margin-right: 8px;
        }

        .refresh-btn:hover {
            background-color: var(--primary);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-card {
            background-color: white;
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .stat-title {
            font-size: 14px;
            color: var(--gray);
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
        }

        .stat-icon.blue {
            background: linear-gradient(135deg, #1976d2, #64b5f6);
        }

        .stat-icon.green {
            background: linear-gradient(135deg, #4caf50, #81c784);
        }

        .stat-icon.orange {
            background: linear-gradient(135deg, #ff9800, #ffb74d);
        }

        .stat-icon.red {
            background: linear-gradient(135deg, #f44336, #e57373);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--gray-dark);
        }

        .stat-change {
            display: flex;
            align-items: center;
            font-size: 13px;
        }

        .stat-change.positive {
            color: #4caf50;
        }

        .stat-change.negative {
            color: #f44336;
        }

        .stat-change i {
            margin-right: 5px;
        }

        .chart-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }

        .chart-card {
            background-color: white;
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .chart-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-dark);
        }

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .chart-action {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .chart-action:hover {
            background-color: #e0e0e0;
        }

        .chart-container {
            height: 300px;
            position: relative;
        }

        .chart-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: var(--gray);
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 6px;
        }

        .batch-list {
            height: 300px;
            overflow-y: auto;
        }

        .batch-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .batch-item:last-child {
            border-bottom: none;
        }

        .batch-status {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 12px;
        }

        .batch-status.completed {
            background-color: #4caf50;
        }

        .batch-status.in-progress {
            background-color: #ff9800;
        }

        .batch-status.planned {
            background-color: #9e9e9e;
        }

        .batch-info {
            flex: 1;
        }

        .batch-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-dark);
            margin-bottom: 3px;
        }

        .batch-meta {
            font-size: 12px;
            color: var(--gray);
        }

        .batch-yield {
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-dark);
        }

        .alerts-section {
            background-color: white;
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 25px;
        }

        .alert-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .alert-item {
            display: flex;
            padding: 15px;
            border-radius: var(--radius-sm);
            border-left: 4px solid;
            background-color: #f9f9f9;
        }

        .alert-item.warning {
            border-left-color: #ff9800;
        }

        .alert-item.danger {
            border-left-color: #f44336;
        }

        .alert-item.info {
            border-left-color: #2196f3;
        }

        .alert-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 18px;
            flex-shrink: 0;
        }

        .alert-icon.warning {
            background-color: rgba(255, 152, 0, 0.1);
            color: #ff9800;
        }

        .alert-icon.danger {
            background-color: rgba(244, 67, 54, 0.1);
            color: #f44336;
        }

        .alert-icon.info {
            background-color: rgba(33, 150, 243, 0.1);
            color: #2196f3;
        }

        .alert-content {
            flex: 1;
        }

        .alert-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--gray-dark);
        }

        .alert-message {
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 8px;
        }

        .alert-time {
            font-size: 12px;
            color: #9e9e9e;
        }

        /* 全屏模式样式 */
        .app-container.fullscreen {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            overflow: auto;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .chart-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .alert-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="top-bar">
                <div class="page-title">
                    <h1>主控面板</h1>
                    <p>异烟酸生产收率预测系统概览</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <input type="text" placeholder="搜索...">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <div class="badge">3</div>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </div>

            <!-- 内容包装器 -->
            <div class="content-wrapper">
                <div class="page-content">
                    <!-- 仪表板头部 -->
                    <div class="dashboard-header">
                        <div class="date-selector">
                            <select>
                                <option>今日</option>
                                <option>本周</option>
                                <option selected>本月</option>
                                <option>本季度</option>
                                <option>本年</option>
                                <option>自定义</option>
                            </select>
                            <button class="refresh-btn">
                                <i class="fas fa-sync-alt"></i>
                                刷新数据
                            </button>
                        </div>
                    </div>

                    <!-- 统计卡片 -->
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-header">
                                <div class="stat-title">平均收率</div>
                                <div class="stat-icon blue">
                                    <i class="fas fa-percentage"></i>
                                </div>
                            </div>
                            <div class="stat-value">92.4%</div>
                            <div class="stat-change positive">
                                <i class="fas fa-arrow-up"></i>
                                3.2% 相比上月
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-header">
                                <div class="stat-title">批次数量</div>
                                <div class="stat-icon green">
                                    <i class="fas fa-flask"></i>
                                </div>
                            </div>
                            <div class="stat-value">28</div>
                            <div class="stat-change positive">
                                <i class="fas fa-arrow-up"></i>
                                2 相比上月
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-header">
                                <div class="stat-title">预测准确率</div>
                                <div class="stat-icon orange">
                                    <i class="fas fa-bullseye"></i>
                                </div>
                            </div>
                            <div class="stat-value">96.8%</div>
                            <div class="stat-change positive">
                                <i class="fas fa-arrow-up"></i>
                                0.5% 相比上月
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-header">
                                <div class="stat-title">异常事件</div>
                                <div class="stat-icon red">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                            </div>
                            <div class="stat-value">3</div>
                            <div class="stat-change negative">
                                <i class="fas fa-arrow-up"></i>
                                1 相比上月
                            </div>
                        </div>
                    </div>

                    <!-- 图表行 -->
                    <div class="chart-row">
                        <div class="chart-card">
                            <div class="chart-header">
                                <div class="chart-title">收率趋势分析</div>
                                <div class="chart-actions">
                                    <div class="chart-action">
                                        <i class="fas fa-expand"></i>
                                    </div>
                                    <div class="chart-action">
                                        <i class="fas fa-download"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-container">
                                <!-- 图表将通过JavaScript渲染 -->
                                <img src="images/yield-trend-chart.png" alt="收率趋势图" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                            <div class="chart-legend">
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #1976d2;"></div>
                                    <span>实际收率</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #4caf50;"></div>
                                    <span>预测收率</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-color" style="background-color: #ff9800;"></div>
                                    <span>目标收率</span>
                                </div>
                            </div>
                        </div>

                        <div class="chart-card">
                            <div class="chart-header">
                                <div class="chart-title">近期批次</div>
                                <div class="chart-actions">
                                    <div class="chart-action">
                                        <i class="fas fa-filter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="batch-list">
                                <div class="batch-item">
                                    <div class="batch-status completed"></div>
                                    <div class="batch-info">
                                        <div class="batch-name">批次 #A2023112</div>
                                        <div class="batch-meta">完成于 2023-11-20 14:30</div>
                                    </div>
                                    <div class="batch-yield">93.2%</div>
                                </div>
                                <div class="batch-item">
                                    <div class="batch-status completed"></div>
                                    <div class="batch-info">
                                        <div class="batch-name">批次 #A2023111</div>
                                        <div class="batch-meta">完成于 2023-11-18 09:45</div>
                                    </div>
                                    <div class="batch-yield">91.7%</div>
                                </div>
                                <div class="batch-item">
                                    <div class="batch-status completed"></div>
                                    <div class="batch-info">
                                        <div class="batch-name">批次 #A2023110</div>
                                        <div class="batch-meta">完成于 2023-11-15 16:20</div>
                                    </div>
                                    <div class="batch-yield">92.5%</div>
                                </div>
                                <div class="batch-item">
                                    <div class="batch-status in-progress"></div>
                                    <div class="batch-info">
                                        <div class="batch-name">批次 #A2023113</div>
                                        <div class="batch-meta">进行中 - 开始于 2023-11-21 08:00</div>
                                    </div>
                                    <div class="batch-yield">预测 92.8%</div>
                                </div>
                                <div class="batch-item">
                                    <div class="batch-status planned"></div>
                                    <div class="batch-info">
                                        <div class="batch-name">批次 #A2023114</div>
                                        <div class="batch-meta">计划于 2023-11-23 08:00</div>
                                    </div>
                                    <div class="batch-yield">--</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 警报部分 -->
                    <div class="section-title">系统警报</div>
                    <div class="alerts-section">
                        <div class="alert-list">
                            <div class="alert-item warning">
                                <div class="alert-icon warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="alert-content">
                                    <div class="alert-title">反应温度波动</div>
                                    <div class="alert-message">批次 #A2023113 的反应温度出现异常波动，可能影响收率。</div>
                                    <div class="alert-time">30分钟前</div>
                                </div>
                            </div>
                            <div class="alert-item danger">
                                <div class="alert-icon danger">
                                    <i class="fas fa-radiation"></i>
                                </div>
                                <div class="alert-content">
                                    <div class="alert-title">催化剂活性下降</div>
                                    <div class="alert-message">检测到催化剂活性低于阈值，建议更换催化剂。</div>
                                    <div class="alert-time">2小时前</div>
                                </div>
                            </div>
                            <div class="alert-item info">
                                <div class="alert-icon info">
                                    <i class="fas fa-sync-alt"></i>
                                </div>
                                <div class="alert-content">
                                    <div class="alert-title">模型更新完成</div>
                                    <div class="alert-message">预测模型已完成每周更新，准确率提升0.3%。</div>
                                    <div class="alert-time">昨天 16:42</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 参数监控卡片 -->
                    <div class="section-title">关键参数监控</div>
                    <div class="info-grid">
                        <div class="content-card">
                            <div class="content-card-title">
                                <i class="fas fa-temperature-high"></i>
                                反应温度
                            </div>
                            <div class="chart-container" style="height: 150px;">
                                <img src="images/temperature-chart.png" alt="温度图表" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                        <div class="content-card">
                            <div class="content-card-title">
                                <i class="fas fa-tachometer-alt"></i>
                                压力监控
                            </div>
                            <div class="chart-container" style="height: 150px;">
                                <img src="images/pressure-chart.png" alt="压力图表" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                        <div class="content-card">
                            <div class="content-card-title">
                                <i class="fas fa-flask"></i>
                                pH值
                            </div>
                            <div class="chart-container" style="height: 150px;">
                                <img src="images/ph-chart.png" alt="pH值图表" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                        <div class="content-card">
                            <div class="content-card-title">
                                <i class="fas fa-vial"></i>
                                催化剂活性
                            </div>
                            <div class="chart-container" style="height: 150px;">
                                <img src="images/catalyst-chart.png" alt="催化剂活性图表" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载脚本 -->
    <script src="js/page-loader.js"></script>
    <script>
        // 此处可以添加仪表板特定的JavaScript代码
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟数据加载
            const refreshBtn = document.querySelector('.refresh-btn');
            refreshBtn.addEventListener('click', function() {
                refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                setTimeout(() => {
                    refreshBtn.innerHTML = '<i class="fas fa-sync-alt"></i> 刷新数据';
                    alert('数据已刷新');
                }, 1500);
            });

            // 图表操作
            const expandBtns = document.querySelectorAll('.chart-action');
            expandBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if(this.querySelector('.fa-expand')) {
                        alert('展开图表到全屏');
                    } else if(this.querySelector('.fa-download')) {
                        alert('下载图表数据');
                    } else if(this.querySelector('.fa-filter')) {
                        alert('筛选批次数据');
                    }
                });
            });
        });
    </script>
</body>
</html> 